import { ScrollView, TouchableOpacity, Text, StyleSheet, View } from "react-native"
import { ArrowLeft, Settings } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { forwardRef } from "react"

interface WordNavigationProps {
    words: Array<{ id: string; word: string }>
    currentIndex: number
    onWordSelect: (index: number) => void
    onBackPress: () => void
    onSettingsPress: () => void
}

export const WordNavigation = forwardRef<ScrollView, WordNavigationProps>(
    ({ words, currentIndex, onWordSelect, onBackPress, onSettingsPress }, ref) => {
        return (
            <View style={styles.header}>
                <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
                    <ArrowLeft size={24} color={theme.colors.neutral.black} />
                </TouchableOpacity>

                <ScrollView ref={ref} horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.wordNav}>
                    {words.map((word, index) => (
                        <TouchableOpacity
                            key={word.id}
                            style={[styles.navWordContainer, currentIndex === index && styles.navWordContainerActive]}
                            onPress={() => onWordSelect(index)}
                        >
                            <Text
                                style={[styles.navWord, currentIndex === index && styles.navWordActive]}
                                numberOfLines={1}
                                ellipsizeMode="tail"
                            >
                                {word.word}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </ScrollView>

                <TouchableOpacity onPress={onSettingsPress} style={styles.settingsButton}>
                    <Settings size={24} color={theme.colors.neutral.black} />
                </TouchableOpacity>
            </View>
        )
    },
)

const styles = StyleSheet.create({
    header: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        gap: theme.spacing.sm,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    settingsButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    wordNav: {
        flexGrow: 1,
        alignItems: "center",
        paddingHorizontal: theme.spacing.sm,
    },
    navWordContainer: {
        marginHorizontal: theme.spacing.xs,
        paddingVertical: theme.spacing.xs,
        paddingHorizontal: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        maxWidth: 100,
    },
    navWordContainerActive: {
        backgroundColor: theme.colors.primary.default,
    },
    navWord: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    navWordActive: {
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

